<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-if="!userId"
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-select
        v-model="listQuery.gender"
        clearable
        filterable
        placeholder="请选择性别"
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
        <el-option label="未知" value="0" />
      </el-select>
      <el-select
        v-model="listQuery.countryCode"
        clearable
        filterable
        placeholder="国家"
        style="width:100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="key"
        />
      </el-select>
      <el-select
        v-model="listQuery.isLiveCertification"
        clearable
        filterable
        placeholder="请选择认证类型"
      >
        <el-option label="真人认证" value="0" />
        <el-option label="女神认证" value="1" />
      </el-select>
      <el-select
        v-model="listQuery.isRecommend"
        clearable
        filterable
        placeholder="请选择是否已推荐"
      >
        <el-option label="已推荐" value="1" />
        <el-option label="未推荐" value="0" />
      </el-select>
      <el-input v-model="listQuery.topicName" placeholder="请输入动态话题" autocomplete="off"></el-input>
      <el-select
        v-model="listQuery.isPrivate"
        clearable
        filterable
        placeholder="动态类型"
      >
        <el-option label="普通动态" :value="false" />
        <el-option label="私密动态" :value="true" />
      </el-select>
      <el-select
        v-model="listQuery.type"
        filterable
        placeholder="审核类型"
      >
        <el-option label="全部" :value="0" />
        <el-option label="已删除" :value="1" />
        <el-option label="已审阅" :value="2" />
        <el-option label="未审阅" :value="3" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div style="margin:10px 0">
      <el-button
        type="primary"
        @click="onHandleAll(2)"
      >批量审阅</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        row-key="recordId"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          label="动态ID"
          prop="contentId"
        />
        <el-table-column
          align="center"
          label="用户ID"
          prop="userId"
          width="70"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
            <span>{{ userAddress[row.userId] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="昵称"
        >
          <template slot-scope="{ row }">{{ row.nickname }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="性别"
          width="50"
        >
          <template slot-scope="{ row }">{{ row.gender | gender }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="动态类型/动态圈子/动态话题   "
        >
          <template slot-scope="{ row }">
            动态类型: {{ row.privateContent === true ? "私密" : "普通" }}<br>
            动态圈子: {{ row.labelList ? row.labelList[0].circleLabel: '' }}<br>
            动态话题: <div v-for="(item, index) in row.topicInfoVos" :key="index">{{ item.topicName }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="动态权重" width="100" prop="sortWeight">
        </el-table-column>
        <el-table-column
          align="center"
          label="动态内容"
        >
          <template slot-scope="{ row }">{{ row.content }}</template>
        </el-table-column>
        <el-table-column align="center" label="国家" width="130">
          <template slot-scope="{ row }">{{ row.countryCode | countryCode }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="动态照片"
          width="500"
        >
          <template slot-scope="{row}">
            <div
              v-if="row.type === 1"
            >
              <ul class="photos-list" style="list-style: none">
                <li
                  v-for="img in row.imageVos"
                  :key="img.url"
                  style="display: inline-block;"
                >
                  <image-tooltip :image-id="img.url">
                    <img
                      v-if="img.url"
                      slot="img"
                      :src="img.url"
                      width="120"
                      height="120"
                      style="cursor:pointer"
                      title=""
                      @click.prevent="zoomImage(img.url, 'image')"
                    >
                  </image-tooltip>
                </li>
              </ul>
            </div>
            <div
              v-if="row.type === 2 && row.video && row.video.videoUrl"
              class="video-wrap"
            >
              <video
                controls
                :src="row.video.videoUrl"
                width="100"
                style="cursor:pointer"
                title="点击放大"
                @click="zoomImage(row.video.videoUrl, 'video')"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="发布时间"
          width="140"
        >
          <template slot-scope="{ row }">{{ row.createTimestamp | parseTime }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="回复数量/点赞数量"
          width="100"
        >
          <template slot-scope="{ row }">
            回复数量: {{ row.commentNum }}<br>
            点赞数量: {{ row.likeNum }}<br>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="审核状态/是否删除/推荐状态"
        >
          <template slot-scope="{ row }">
            <p>{{ row.review? '已审阅' : '未审阅' }}</p>
            <p>{{ row.deleteFlag? '已删除': '未删除' }}</p>
            <p v-if="row.isRecommend === 0">未推荐</p>
            <p v-else-if="row.isRecommend === 1">已推荐</p>
            <p v-else>未处理</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="{ row }">
            <el-button
              v-if="!row.review && !row.deleteFlag"
              type="primary"
              size="mini"
              @click="onHandle([row.contentId])"
            >审阅{{ status }}</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="getComment(row)"
            >评论详情</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="changeDynamic(row)"
            >修改动态</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="onRecommend(row)"
            >{{ row.isRecommend === 0 ? '推荐' : '取消推荐' }}</el-button>
            <el-button
              v-if="!row.deleteFlag"
              type="danger"
              size="mini"
              @click="onDelete(row)"
            >删除</el-button>
            <el-button
              v-if="row.forbidState===0"
              type="danger"
              size="mini"
              @click="onForbid(row)"
            >封号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
      :type="imageViewType"
    />
    <DialogForbidAccount
      :visible.sync="dialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="'0'"
      @onSuccess="doSearch"
    />
    <el-dialog
      title="动态评论"
      :visible.sync="dynamicFormVisible"
      width="70%"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :model="dynamicItem"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <div class="list-detail">
          <Dunamic :depth="0" :content-id="dynamicItem.row.contentId" :is-more="dynamicItem.commentVoList.length >= 20" :list="dynamicItem.commentVoList" :dynamic-content="dynamicItem.dynamicContent"></Dunamic>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="修改动态" :visible.sync="dialogChangeDynamic">
      <el-form :model="changeDynamicItems">
        <el-form-item label="取消圈子：">
          <el-switch
            v-model="changeDynamicItems.cancel"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item v-if="!changeDynamicItems.cancel" label="所属圈子：">
          <el-select
            v-model="changeDynamicItems.circleId"
            clearable
            filterable
            placeholder="选择圈子"
            style="width:100px"
          >
            <template v-for="(item, index) in circleList">
              <el-option :key="index" :label="item.circleName" :value="item.id" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="动态权重：">
          <el-input
            v-model="changeDynamicItems.sortWeight"
            clearable
            placeholder="请输入动态权重"
            style="width:130px"
          />
        </el-form-item>
        <el-form-item label="动态话题：">
          <el-tag
            v-for="(tag, index) in changeDynamicItems.topicId"
            :key="index"
            closable
            type="success"
            @close="handleClose(tag)"
          >
            {{ changeDynamicItems.topicNameItem[tag] }}
          </el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeDynamic = false">取 消</el-button>
        <el-button type="primary" @click="checkDynamic()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'

  import { xhrPostAudit, getDynamicCommentList, updateContentInfo, getCircleList,
    getDynamicDetail, xhrPostDelete, updateDynamicReview, xhrPostRecommend } from '@/api/anchor'
  import AnchorMixin from '../mixin'
  import DialogForbidAccount from '@/views/account/components/DialogForbidAccount'
  import ImageViewer from '@/components/ImageViewer/index'
  import Dunamic from './dynamic'
  import { deepClone } from '@/utils';
  import { deepCopy } from 'ali-oss/lib/common/utils/deepCopy';
  import { getCountryItem } from '@/filters'
  export default {
    name: 'PostList',
    components: { TablePagination, DialogForbidAccount, ImageViewer, Dunamic },
    mixins: [AnchorMixin],
    props: {
      userId: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        imageViewType: 'image',
        list: [],
        total: 0,
        onlineTotal: 0,
        listQuery: {
          offset: 0,
          limit: 100,
          isRecommend: null,
          topicName: null,
          isLiveCertification: null,
          type: 0,
          gender: null,
          isPrivate: null
        },
        changeDynamicItems: {
          cancel: 0,
          circleId: null,
          contentId: null,
          topicId: [],
          topicNameItem: {},
          sortWeight: null,
          updateTopic: false
        },
        isRecommend: null,
        circleList: [],
        topicNames: {},
        dialogChangeDynamic: false,
        status: null,
        daterangeValue: '',
        showImage: false,
        imageUrl: '',
        dialogVisible: false,
        forbidAccounts: null,
        dynamicFormVisible: false,
        dynamicItem: {
          row: {},
          commentVoList: [],
          dynamicContent: {}
        },
        userAddress: {},
        countryCodeItem: getCountryItem(),
        selectRows: []
      }
    },
    created() {
      this.doSearch()
      this.CircleList()
    },
    methods: {
      handleClose(tag) {
        this.changeDynamicItems.topicId.splice(this.changeDynamicItems.topicId.indexOf(tag), 1);
        this.changeDynamicItems.updateTopic = true
      },
      CircleList() {
        getCircleList()
          .then(resp => {
            this.circleList = resp.data
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      doSearch() {
        if (!this.validateParams(this.listQuery)) {
          return
        }
        this.handleCheckedStatus()
        if (this.userId) {
          this.listQuery.userId = this.userId
        }
        const send_data = deepCopy(this.listQuery)
        if (send_data.type === 1) {
          send_data.deleteFlag = true
        }
        if (send_data.type === 2) {
          send_data.isReview = true
        }
        if (send_data.type === 3) {
          send_data.isReview = false
        }
        xhrPostAudit(send_data)
          .then(resp => {
            this.list = resp.data.list
            this.total = resp.data.total
            this.status = resp.data.status
            if (resp.data.userAddress){
              this.userAddress = resp.data.userAddress
            }
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      onForbid(row) {
        this.forbidAccounts = String(row.userId)
        this.dialogVisible = true
      },
      zoomImage(url, type) {
        this.showImage = true
        this.imageUrl = url
        this.imageViewType = type
      },
      handleSelectionChange(rows) {
        this.selectRows = rows
      },
      onHandleAll(status){
        if (!this.selectRows.length) {
          this.$message.warning('请选择一条数据')
        } else if (status === 2){
          const contentIds = this.generateParams(this.selectRows)
          this.onHandle(contentIds)
        }
      },
      generateParams(rows) {
        const contentIds = []
        rows.forEach(row => {
          contentIds.push(row.contentId)
        })
        return contentIds
      },
      onHandle(contentIds) {
        updateDynamicReview({ ids: contentIds })
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      onDelete(row) {
        this.$confirm('确定删除 ID:[' + row.contentId + '] 的动态记录?').then(() => {
          xhrPostDelete(row)
            .then(resp => {
              this.$message.success('操作成功')
              this.doSearch()
            })
            .catch(err => {
              this.$message.error(err)
            })
        })
      },
      getComment(row) {
        const data = {
          'contentId': row.contentId
        }
        getDynamicDetail(data).then(rep => {
          this.dynamicItem.dynamicContent = rep.data
          getDynamicCommentList(data).then(response => {
            this.dynamicItem.row = row
            this.dynamicItem.commentVoList = response.data.commentVoList
            this.dynamicFormVisible = true
          })
        })
      },
      changeDynamic(row) {
        console.log('修改动态')
        this.changeDynamicItems.contentId = row.contentId
        this.changeDynamicItems.cancel = !row.labelList;
        this.changeDynamicItems.sortWeight = row.sortWeight ? row.sortWeight : 0
        if (row.labelList) {
          this.changeDynamicItems.circleId = row.labelList[0].circleId
        } else {
          this.changeDynamicItems.circleId = null
        }
        this.changeDynamicItems.topicId = []
        this.changeDynamicItems.topicNameItem = {}
        if (row.topicInfoVos) {
          for (const i in row.topicInfoVos) {
            this.changeDynamicItems.topicId.push(row.topicInfoVos[i].topicId)
            this.changeDynamicItems.topicNameItem[row.topicInfoVos[i].topicId] = row.topicInfoVos[i].topicName
          }
        }
        this.dialogChangeDynamic = true
      },
      checkDynamic() {
        const item = deepClone(this.changeDynamicItems)
        if (item.cancel) {
          delete item.circleId
        }
        item.cancel = item.cancel ? 1 : 0
        updateContentInfo(item).then(response => {
          this.$message.success('操作成功')
          this.dialogChangeDynamic = false
          this.doSearch()
        }).catch(err => {
          this.$message.error(err)
        })
      },
      onRecommend(row) {
        const { contentId, isRecommend } = row
        this.$confirm(`确定${isRecommend === 0 ? '' : '取消'}推荐 ID:[${row.contentId}] 的动态记录?`).then(() => {
          const p = {
            contentId: contentId,
            type: isRecommend === 0 ? 1 : 0
          }
          xhrPostRecommend(p)
            .then(resp => {
              this.$message.success('操作成功')
              this.doSearch()
            })
            .catch(err => {
              this.$message.error(err)
            })
        })
      },
      handleClick(tab) {
        switch (tab.name) {
          case 'second':
            this.$router.push('/anchor/comment-list')
            break
        }
      }
    }
  }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
</style>
